<template>
	<view class="wrap yjfk-form-right">
		<image class="applyBg" src="/static/aidex/img/applyBg.jpg" mode=""></image>
		<u-form class="from" :model="form" ref="uForm">
			<u-form-item label="姓名" prop="name">
				<u-input v-model="form.name" placeholder="请输入姓名(必填)" />
			</u-form-item>
			<u-form-item label="手机" prop="phone">
				<u-input v-model="form.phone" placeholder="请输入手机号码(必填)" />
			</u-form-item>
			<u-form-item label="密码" prop="psw">
				<u-input v-model="form.psw" placeholder="请填写登录密码(必填)" />
			</u-form-item>
			<view class="agreement">
				<u-checkbox size="28" v-model="check">我已经阅读并接受</u-checkbox>
				<view class="agreement-text">
					“代理协议”
				</view>
			</view>
		</u-form>

		<view class="form-footer">
			<u-button class="btn" type="primary" @click="submit">申请成为代理商</u-button>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				check: false,
				form: {
					name: '',
					phone: '',
					psw: ''
				},
				rules: {
					name: [{
						required: true,
						message: '请输入姓名',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}],
					phone: [{
							required: true,
							message: '手机号不能为空',
							trigger: ['change', 'blur'],
						},
						{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								// 上面有说，返回true表示校验通过，返回false表示不通过
								// this.$u.test.mobile()就是返回true或者false的
								return this.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							// 触发器可以同时用blur和change
							trigger: ['change', 'blur'],
						}
					],
					psw: [{
						required: true,
						message: '密码不能为空',
						trigger: ['change', 'blur'],
					}]
				}
			};
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
			
		},
		methods: {

			submit() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						console.log('验证通过');
					} else {
						console.log('验证失败');
					}
				});
			},

		}
	};
</script>
<style lang="scss" scoped>
	/deep/ .u-checkbox__label {
		margin-right: 2rpx !important;
		font-size: 28rpx;
	}

	.agreement-text {
		color: #2979ff;

		font-size: 28rpx;
	}

	.from {
		margin: 30rpx;
	}

	.agreement {
		display: flex;
		align-items: center;
		margin: 40rpx 0;

		.agreement-text {
			padding-left: 8rpx;
			color: $u-tips-color;
		}
	}

	.applyBg {
		width: 100%;
		height: 368rpx;
	}
</style>